<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px"
        >
            <el-breadcrumb-item>
                <!--:to="{ path: '/application' }"-->
                <i class="  el-icon-mouse"></i>
                <span>使用日志</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main-container">
            <div class="filter-box">
                <div class="filter-item">
                    <span>用户名:</span>
                    <el-select
                        v-model="formData.userName"
                        placeholder="请选择"
                        size="mini"
                        clearable
                    >
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="filter-item">
                    <span style="width:60px">病理ID:</span>
                    <el-input
                        v-model="formData.pathologyId"
                        placeholder="请输入病理ID"
                        size="mini"
                        clearable
                    ></el-input>
                </div>
                <div class="filter-item">
                    <span style="width:60px">IP地址:</span>
                    <el-input
                        v-model="formData.loginIp"
                        placeholder="请输入IP地址"
                        size="mini"
                        clearable
                    ></el-input>
                </div>
                <div class="filter-item">
                    <span>查看时间:</span>
                    <el-date-picker
                        v-model="formData.loginTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        size="mini"
                        style="width:200px"
                        clearable
                    >
                    </el-date-picker>
                </div>

                <el-button
                    type="primary"
                    size="mini"
                    @click="tableDataList"
                >搜索</el-button>
            </div>
            <div style="width: 100%">
                <el-table
                    height="570"
                    :data="tableData"
                    :border="true"
                    :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="{
            'background-color': '#E6E9EF',
            color: '#777C7C',
            'font-weight': '400',
            'font-size': '15px',
            'border-right': '1px solid #ffffff',
            'text-align': 'center',
          }"
                    size="mini"
                    style="width: 100%; margin-top: 20px"
                    stripe
                >
                    <el-table-column
                        prop="userName"
                        label="用户名"
                    ></el-table-column>
                    <el-table-column
                        prop="jobNumber"
                        label="工号"
                    ></el-table-column>
                    <el-table-column
                        prop="pathologyId"
                        label="病理ID"
                    ></el-table-column>
                    <el-table-column
                        prop="loginIp"
                        label="IP地址"
                    ></el-table-column>
                    <el-table-column
                        prop="examineTime"
                        label="查看时间"
                    ></el-table-column>
                    <el-table-column
                        prop="submitReportResult"
                        label="提交结果"
                    ></el-table-column>

                </el-table>
                <el-row
                    style="margin-top: 10px"
                    align="right"
                >
                    <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page="pageInfo.page"
                        :page-size="pageInfo.size"
                        :page-sizes="pagination_page_sizes"
                        :total="pageInfo.total"
                        style="text-align: center; margin-top: 12px"
                        layout="sizes, prev, pager, next, total"
                    >
                    </el-pagination>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { itemsPerPage } from '@/client/libs/util';
import { PAGINATION_PAGE_SIZES } from '@/client/consts/constant';

export default {
    name: 'examineBiopsyLog',
    data() {
        return {
            pagination_page_sizes: PAGINATION_PAGE_SIZES,
            formData: {
                loginTime: [],
                userName: '',
                loginIp: '',
                pathologyId: '',
            },
            userList: [],
            tableData: [],
            pageInfo: {
                page: 1,
                size: itemsPerPage.get(),
                total: 15,
            },
        };
    },
    mounted() {
        this.getUserList();
        this.tableDataList();
    },
    methods: {
        handleSizeChange(val) {
            itemsPerPage.set(val);
            this.pageInfo.size = val;
            this.tableDataList();
        },
        handleCurrentChange(val) {
            this.pageInfo.page = val;
            this.tableDataList();
        },
        //请求用户列表
        getUserList() {
            try {
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/operation-log/findByName`,
                }).then((res) => {
                    this.userList = res.data.data.map((item, index) => ({
                        id: index,
                        name: item,
                    }));
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        //请求典型案例库tabledata数据列表
        tableDataList() {
            try {
                const { page, size } = this.pageInfo;
                const {
                    userName,
                    loginIp,
                    pathologyId,
                    loginTime: [startTime = '', endTime = ''],
                } = this.formData;
                this.$axios({
                    method: 'POST',
                    url: `/PROXY-Remote/getAllExamineBiopsyLogList`,
                    data: {
                        userName,
                        loginIp,
                        pathologyId,
                        startTime: startTime ? startTime + ' 00:00:00' : '',
                        endTime: endTime ? endTime + ' 23:59:59' : '',
                        page,
                        size,
                    },
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.pageInfo.page =
                            res.data.rows.pageable.pageNumber + 1;
                        this.pageInfo.size = res.data.rows.pageable.pageSize;
                        this.pageInfo.total = res.data.rows.totalElements;
                        this.tableData = res.data.rows.content.map((item) => ({
                            ...item,
                        }));
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
    },
};
</script>

<style scoped>
.el-table th.gutter {
    display: table-cell !important;
}

.filter-box {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.filter-item {
    display: flex;
    align-items: center;
}
</style>
